<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-21 11:01:40
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-23 16:23:58
 * @FilePath: /h-radar-expose/components/ShowCode.vue
 * @Description:
-->
<template>
  <div v-if="code" v-highlight="info" class="code-container">
    <pre><code  :class="info.language">{{ code }}</code></pre>
  </div>
</template>
<script lang="ts" setup> 
  import {defineProps, ref,computed,watchEffect} from 'vue';
  const props=defineProps({
    codeInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const info=ref<any>({});
  watchEffect(() => {   
  info.value = {  
    showLineNumbers: false,  
    language: 'javascript',  
    code: '',  
    ...props.codeInfo, // 直接使用 props.codeInfo  
  };  
}); 
  const code=computed(()=>{
    return props.codeInfo.code || ''
  })
</script>
<style lang="scss" scoped>
.code-container {
  height: 100%;
  width: 100%;
  overflow: auto;

  pre {
    display: flex;
    white-space: pre-wrap;

    code.hljs {
      color: rgb(60, 84, 113);
    }

    code {
      padding: 8px 16px;
      flex: 1;

      span {
        display: inline-block;
      }
    }
  }
}
</style>
<style lang="scss">
pre {
  font-size: 14px;
  line-height: 22px;
  .number-container {
    display: flex;
    flex-direction: column;
    padding: 8px;
    // background-color: $--table-header-background-color;
  }
}
</style>
